How to build Onboardings from Scratch
Overview
The document covers building web onboardings using JSON/config files.
Related Links:
Set up JSON/Config Files
The structure of an empty onboarding file should look similar to this:
{
"id": "",
"language": "",
"appId": "",
"seo": {
"title": "",
"favicon": "",
"description": ""
},
"logoWithProgressBar": {},
"backgroundMusic": "",
"steps": [],
"logic": []
}
Each of those keys is required (except logic, logoWithProgressBar and backgroundMusic) to build a web onboarding.
| Key | Notes |
|---|---|
id | Is the id of the onboarding |
languages | Current supported languages: en, fr, de, es, and pt |
appId | The id of the web onboarding’s app (e.g. co.thefabulous.app) |
seo | An object for the data needed for SEO. An example of Fabulous SEO data: "seo": { "title": "Fabulous", "favicon": "https://www.thefabulous.co/images/favicon.png", "description": "Fabulous is the #1 self-care app to help you build better habits and achieve your goals. Join millions transforming their lives by building a new routine today" } |
logoWithProgressBar | A few steps support having a progress bar during the onboarding. For those steps, we’ll need to add the style data needed for the progress bar. An example of a progress bar in [Goal Choice Radio](Onboarding Templates/Goal Choice Radio): { "type": "gradient", "logoImage": "https://www.thefabulous-staging.co/images/shape-logo.png", "logoWidth": "126px", "logoWidthMobile": "102px", "logoHeight": "40px", "logoHeightMobile": "32px", "progressBarBackground": "#FFF", "progressBarColor": "linear-gradient(270deg, #8CDBDF 15.63%, #251C93 83.85%)" } |
steps | An array of any of the [Onboarding Templates](Onboarding Templates)we currently have. |
logic | Handles some logic to move forward in the onboarding based on some conditions. You can find all[Supported Logic](Supported Logic). |
backgroundMusic | a URL to a sound to be played in the background throughout the onboarding flow. |
Preview Onboardings
After building the config file, we can preview it here on the onboarding previewer. If all the steps are valid you should be able to go through it without any issue.
[!IMPORTANT] To learn more about how to validate and preview an onboarding, please refer [How to Test and Validate onboarding JSON files](How to Test and Validate onboarding JSON files).
Save & Release Onboarding
You can then save the new onboarding on Airtable as an Experiment and use Appsmith to release & publish it.
[!IMPORTANT] Read more about [Using appsmith to view/publish a release](Using appsmith to view_publish a release).